<template>
      <el-container>
        <!-- 头部区域 -->
        <el-header class="header">
            <div class="one">
              <img src="../src/assets/heima.png" alt="">
              <span>Vue后台管理项目</span>
            </div>
           <el-button @click="logout">退出</el-button>  
        </el-header>
        <el-container>
          <!-- 侧边栏区域 -->
          <el-aside width="200px" class="aside">
                <div class="zhe" @click="three">|||</div>
                 <el-col :span="12">
                    <!-- <h5>自定义颜色</h5> -->
                    <el-menu
                      default-active="2"
                      class="el-menu-vertical-demo"
                       @open="handleOpen"
                        @close="handleClose"    
                      background-color="#545c64"
                      text-color="#fff"
                      active-text-color="#409EFF" 
                      :unique-opened='true' 
                      :collapse="transition" 
                      :collapse-transition="false"
                      router :default-active='activePath'>

                      <el-submenu :index="item.id+''" v-for="item in menus" :key="item.id">
                        <!-- 一级列表 -->
                        <template slot="title">
                          <i class="el-icon-sold-out" ></i>
                          <span>{{item.authName}}</span>
                        </template>
                        <!-- 二级列表 -->
                        <!-- <div class="two"> -->
                          <el-menu-item :index="'/'+children.path" v-for="children in item.children" :key="children.id" @click="yang('/'+children.path)"> 
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>{{children.authName}}</span>
                                </template>
                            </el-menu-item>
                        <!-- </div> -->
                      
                      </el-submenu>
                    </el-menu>
                  </el-col>
               


          </el-aside>
          <!-- 主题区域 -->
         
          <el-main class="main">

               <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
   

  
    
</template>
<script>
export default {
  data() {
    return {
      menus: [],
      iconObj:{
        '125':'iconfont icon-users',
        '103':'iconfont icon-icon-showpassword',
        '101':'iconfont icon-shangpin',
        '102':'iconfont icon-danju',
        '145':'iconfont icon-baobiao'
      },
      transition:false,
      activePath:''
    }
  },
  created: function() {
    this.Look(),
    this.activePath=window.sessionStorage.getItem('activePath')
  },
  methods: {
    logout() {
      // 点击退出的把token清理掉就可以了.
      window.sessionStorage.clear()
      // 然后重定向到login这个页面
      this.$router.push('/login')
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    async Look() {
      const { data: res } = await this.$http.get('menus')
      if (res.meta.status == 200) {
        this.menus = res.data
        console.log(this.menus)
        console.log(this.iconObj)
      } else {
        // return this.$message.error(res.meta.msg)
        console.log(res.meta.msg)
      }
    },
    three(){
   
      this.transition=!this.transition
      
    },
    yang(activePath){
        window.sessionStorage.setItem('activePath',activePath)
        this.activePath=activePath
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  background-color: skyblue;
  display: flex;
  justify-content: space-between;
  padding: 0;
}
.aside {
  background-color: pink;
  .zhe{
    width: 100%;
    height: 30px;
    background-color: purple;
    text-align: center; 
    line-height:  30px;
    letter-spacing: 0.2em;
  }
  .el-submenu{
    span{
      margin-left: 20px;
    }
  }
}
.main {
  background-color: aqua;
}

.el-container {
  height: 100%;
}

.two {
  display: flex;
  justify-content: flex-end;
}
.el-col {
  width: 100%;
}
.el-menu{
  border-right: 0;
}
</style>
